>>>>>>>>>>>>>>>>>>>>css................. body{ justify-content: center; align-items: center; display: flex; height: 100vh; background: #312b5e; } .loader{ width: 300px; height: 300px; margin: 0 auto; position: relative; } .loader .loader-inner-1{ width: 300px; height: 300px; border-radius: 50%; border-bottom: 10px dashed #fca107; position: absolute; animation: loading-1 5s infinite linear; } .loader .loader-inner-2{ width: 200px; height: 200px; border-radius: 50%; border-bottom: 10px dotted #78f124; position: absolute; top: 50px; left: 45px; animation: loading-1 1s infinite linear; } .loader .loader-inner-3{ width: 100px; height: 100px; border-radius: 50%; border-bottom: 5px solid #ff0728; position: absolute; top: 100px; left: 90px; animation: loading-1 2s infinite linear; } @keyframes loading-1{ from{ -webkit-transform: rotate(0deg); } to{ -webkit-transform: rotate(360deg); } }